// 1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";

// 路由懒加载:
// 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载
//   不再使用import模板化语法引入路由组件
//   而是定义一个当前组件对应的函数,函数内部异步使用import方法引入组件,并返回promise实例即可
//   当路由被切换需要加载当前路由的时候,就会调用当前函数

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");

// 2.应用路由插件(比如注册一些router提供的全局组件等等...)
Vue.use(VueRouter);

// 3.创建路由器对象,并在内部配置模式和路由表
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/Home",
    },
    /* 每一个对象都是一个路由规则,我们可以给路由规则一个名字,方便后边使用 */
    {
      path: "/Home",
      component: Home,
      /* 如果某个路由拥有了默认子路由,我们一般不会在这个路由规则上命名 */
      // name: "Home",
      //二级路由配置
      children: [
        {
          /* 
              二级路由的路径可以直接书写二级路由的路由名称即可,不用书写完整的地址
              但是不能写 /+当前路由地址!!!!!!!!!!!!
            */
          path: "News", //
          component: News,
          name: "News",
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
        },
        {
          path: "Game",
          component: Game,
          name: "Game",
        },
        /* 默认子路由写法1:重定向推荐写法 */
        {
          path: "",
          redirect: "News",
        },
        /* 默认子路由写法2:直接定向设置组件写法 */
        /* {
            path: "",
            component: News,
          }, */
      ],
    },
    {
      path: "/Login",
      component: Login,
      name: "Login",
    },

    //404配置卸载最下边
    {
      path: "/*",
      component: NotFound,
    },
  ],
});

// 4. 暴露router，注入到vue实例中
export default router;
